<template>
  <Header></Header>
  <div class="qiAOba">
    <div class="ficaTIon-top">
      <van-tabs v-model:active="active">
        <van-tab title="居家生活">
          <div class="ficaTIon-back"></div>
          <div class="yiHu">{{ usrClassify.categoryItems.category?.frontDesc }}</div>
          <div class="ficaTIon-box" v-if="usrClassify.itemList">
            <div class="ficaTIon-bottom" v-for="item in usrClassify.itemList" :key="item.id">
              <div class="luFei" @click="gotoDetails(item.id)">
                <img :src="item.listPicUrl" alt="" />
                <div class="naMei"><img :src="item.listPicUrl" alt="" class="wuSuoPu" />{{ item.name }}</div>
                <text class="suoLong"
                  >￥{{ item.retailPrice }}<text class="luoBin">￥{{ item.retailPrice }}</text></text
                >
                <div class="shanZhi"><text>满99减10</text></div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="服饰鞋包">内容 3</van-tab>
        <van-tab title="美食酒水">内容 4</van-tab>
        <van-tab title="居家生活">内容 2</van-tab>
        <van-tab title="服饰鞋包">内容 3</van-tab>
        <van-tab title="美食酒水">内容 4</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
// 导入仓库
import { usrClassifyInfo } from '@/stores/classify'
import router from '@/router'
import { ref } from 'vue'
const usrClassify = usrClassifyInfo()
const route = useRoute()

const gotoDetails = (id: any) => {
  // 跳转并携带对应参数
  // router.push(`/details/${id}`)
  router.push({
    path: '/details',
    query: { id }
  })
}

// 页面挂载获取数据
onMounted(() => {
  const { subCategoryId, categoryId } = route.query
  usrClassify.getClassification(subCategoryId, categoryId)
})

const active = ref(0)
</script>

<style scoped>
.qiAOba {
  background-color: rgb(60, 58, 58);
}
.ficaTIon-top {
  background-color: #fff;
  display: flex;
  justify-content: center;
  height: 30px;
}
.ficaTIon-fiexd {
  position: fixed;
}
.ficaTIon-top text {
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  color: #f00;
}
/* 修改vant基础样式 */
:deep(.van-tabs__line) {
  border-bottom: 1px solid red !important;
  background: #fff;
  border-radius: 0%;
  bottom: 25px;
  /* buttom: 22px; */
}
.active {
  border-bottom: 1upx solid #f00;
}
.yiHu {
  height: 10px;
  font-size: 14px;
  text-align: center;
  padding-top: 10px;
}
.ficaTIon-box {
  margin-top: -20px;
}
.ficaTIon-bottom {
  margin-top: 30px;
  background-color: #fff;
}
.ficaTIon-back {
  height: 12px;
  background-color: #eee;
}

.luFei {
  width: 150px;
  float: left;
  margin: 15px;
}
.luFei > img {
  width: 160px;
  height: 160px;
  border-radius: 10px;
}
.naMei img {
  width: 10px;
  height: 10px;
}

.suoLong {
  color: red;
  font-size: 18px;
}

.shENping {
  font-size: 10px;
}

.luoBin {
  color: rgb(153, 153, 153);
  text-decoration: line-through;
}

.shanZhi {
  background-color: rgb(255, 233, 235);
  border-radius: 10px;
}
.shanZhi > text {
  font-size: 8px;
}
</style>
